<template>
    <div>
        <el-card class="box-card" style="margin:20px;min-width:800px;">
            <div slot="header" class="clearfix">
                <span style="line-height:36px;"><b>文章列表</b></span>
                <el-button style="float:right;background-color:rgb(118,149,255);border-color:rgb(118,149,255)" type="primary" @click="addNewArticle">添加</el-button>
            </div>
            <div>
                <el-table :data="articleStore" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                    <el-table-column prop="Title" label="标题" min-width="80" align="left">
                    </el-table-column>
                    <!-- <el-table-column prop="Content" label="内容" min-width="80" align="left">
                    </el-table-column> -->
                    <el-table-column prop="Author" label="作者" min-width="80" align="left">
                    </el-table-column>
                    <el-table-column prop="CreateTime" label="创建时间" min-width="100" align="center">
                    </el-table-column>
                    <el-table-column  label="操作" min-width="100" align="center" fixed="right" >
                        <template scope="scope">
                            <el-button size="small" @click="handleDetail(scope.$index,scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col :span="24" class="toolbar" style="background-color:white">
			        <el-pagination layout="total,prev, pager, next" background @current-change="handleCurrentChange" :page-size="PageSize" :total="total" style="float:right;background-color:#f2f2f2;border:1px solid rgb(220,223,230)">
			        </el-pagination>  
		        </el-col>
            </div>
        </el-card>
        <el-dialog title="文章详情详情" width="80%" :visible.sync="ifShowAdd"  @close="getArticleList"><add :article-info="articleInfo" :if-open="ifOpen" @getNew="updateArticleList"></add></el-dialog>
    </div>
</template>
<script>
import {getArticleList,createArticle,updateArticle,deleteArticle} from '../../api/api'
import add from './add'
export default {
    data(){
        return{
            ifShowAdd:false,
            listLoading:false,
            sels:[],
            articleStore:"",
            ifOpen:0,
            page:1,
            total: 0,
            PageSize:5,
            CurrentPage:"",
            articleInfo:'',
        }
    },
    methods:{
        //添加按钮
        addNewArticle(){
            this.loadInitData();
            this.ifShowAdd=true;
        },
        getArticleList:function(){
            this.articleInfo='';
            let param={
                PageSize:this.PageSize,
                CurrentPage:this.page,
            }
            getArticleList(param).then(res=>{
                if(res.data.IsSuccess){
                    this.articleStore=res.data.Result;
                    console.log('已发布的文章有',this.articleStore)
                    this.total=res.data.PageCount;
                }
            })
        },
        updateArticleList:function(){
            this.ifShowAdd=false;
            this.getArticleList();
        },
        selsChange: function (sels) {
			this.sels = sels;
        },
        handleDetail:function(index,row){
            this.articleInfo=row;
            this.loadInitData();
            this.ifShowAdd=true;
        },
        handleDelete:function(index,row){
            if(row.Id){
                this.$confirm('此操作将永久删除此文章，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    let param={
                        Id:row.Id
                    }
                    deleteArticle(param).then(res=>{
                        if(res.data.IsSuccess){
                            this.$message({
                                type: "warning",
                                message: "文章删除成功"
                            });
                            this.getArticleList();
                        }else{
                            this.$message({
                                type: "warning",
                                message: "文章删除失败，请稍后再试"
                            });
                            this.getArticleList();
                        }
                    })
                }).catch(()=>{
                                this.$message({
                                    message: "已取消删除"
                                });
                            })
            }
        },
        //打开对话框时调用，初始对话框数据
        loadInitData:function(){
            this.ifOpen=Math.random();
        },
        handleCurrentChange(val) {										
			this.page = val;
			this.getArticleList();
        },
    },
    components:{
        add
    },
    mounted(){
        this.getArticleList();
    }
}
</script>
<style lang="scss">

</style>


